<template>
	<view>
		<view class="store_head">
			<view class="Date_Time">
				<!-- 选择器 -->
				<picker mode="date" :value="currentDate" @change="handleChange"></picker>
				<!-- 显示结果 -->
				<text>{{currentYear }}年{{ currentMonth }}月{{ currentDay }}日</text>
				<text>{{currentHours}}:{{ currentMinutes}}:{{currentSeconds}}</text>
				<text>星期{{ weekday }}</text>
			</view>
			<view class="open_time"><text>营业时间 19:00-21:30</text></view>
			<view class="yuyue_btn">
				<navigator url="/pages/index/want_index">预约</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import { getStoreInfo } from '@/request/api/store.js'
	export default {
		data() {
			return {
				timeoutID: '',
				currentDate: '', // 当前时间
				currentYear: '', // 当前年份
				currentMonth: '', // 当前月份
				currentDay: '', // 当前日期,
				currentHours: '',
				currentMinutes: '',
				currentSeconds: '',
				weekday: '' // 当前星期几
			}
		},
		onShow() {
			this.getStore()
			this.handleChange();
			this.timeoutID = setInterval(() => this.handleChange(), 1000)
		},
		onHide() {
			clearInterval(this.timeoutID);
			this.timeoutID = null;
		},
		methods: {
			handleChange() {
				const date = new Date();
				this.currentYear = date.getFullYear();
				this.currentHours = date.getHours();
				this.currentMinutes = date.getMinutes();
				this.currentSeconds = date.getSeconds();
				this.currentMonth = (date.getMonth() + 1).toString().padStart(2, '0');
				this.currentDay = date.getDate().toString().padStart(2, '0');
				this.weekday = ['日', '一', '二', '三', '四', '五', '六'][date.getDay()];

			},
			getStore() {
				getStoreInfo().then((res) => {
					if(res.code==0){
						uni.setNavigationBarTitle({
							title:res.data.storeName
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.top_view {
		height: var(--status-bar-height);
		width: 100%;
		position: fixed;
		background-color: #F8F8F8;
		top: 0;
		z-index: 999;
	}

	.Date_Time text {
		padding-left: 5px;
	}

	.store_head {
		width: 100%;
		height: 68px;
		background-color: #fff;
		position: relative;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center
	}

	.store_head .open_time {
		font-size: 15px;
		font-weight: 400;
		color: #2c7fd9;
		line-height: 23px;
	}

	.store_head .yuyue_btn {
		width: 60px;
		height: 30px;
		border-radius: 4px;
		background-color: #f8f8f8;
		font-size: 14px;
		font-weight: 400;
		color: #333;
		line-height: 21px;
		position: absolute;
		right: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>